<template>
    <el-button v-bind="btnProps" v-btn-loading="btnLoading"
               :class="btnClass"
               @click.native.prevent="handleClick">
        <slot>
            <template v-if="options.render">
                <expand-dom :data="options" :render="options.render" />
            </template>
            <template v-else-if="options.svgIcon">
                <svg-icon :icon-class="options.svgIcon.iconClass" :class-name="options.svgIcon.className" />
            </template>
            <template v-else>{{ label }}</template>
        </slot>
    </el-button>
</template>

<script>
import { ElButton } from "../attributes";

export default {
    name: "CustomButton",
    props: {
        options: {
            type: Object,
            default: null,
        },
        row: {
            type: Object,
            default: null,
        },
        disabled: {
            type: Boolean,
            default: null,
        },
        index: {
            type: Number,
            default: null,
        },
    },
    components: {
        expandDom: {
            functional: true,
            props: {
                data: Object,
                render: Function,
            },
            render: (h, ctx) => {
                return ctx.props.render(h, ctx.props.data);
            },
        },
    },
    data() {
        return {
            defaultProps: {
                ...ElButton,
            },
        };
    },
    computed: {
        btnProps() {
            let props = $.extend({}, this.defaultProps);
            if (this.options) {
                for (let field in this.defaultProps) {
                    if (typeof this.options[field] !== 'undefined') {
                        props[field] = this.options[field];
                    }
                    let propsFn = this.options[`${ field }Fn`];
                    if (typeof propsFn === 'function') {
                        props[field] = propsFn.call(this.options, this.row);
                    }
                }
            }
            if (this.disabled) {
                props.disabled = this.disabled;
            }
            return props;
        },
        label() {
            if (typeof this.options.labelFn === 'function') {
                return this.options.labelFn.call(this, this.options, this.row);
            }
            if (typeof this.options.textFn === 'function') {
                return this.options.textFn.call(this, this.options, this.row);
            }
            return this.options.label || this.options.text;
        },
        btnLoading() {
            if (this.options.loading) {
                return this.options.loading;
            }
            return {
                loading: false,
            };
        },
        btnClass() {
            if (typeof this.options.classFn === 'function') {
                return this.options.classFn.call(this.options, this.row);
            }
            return this.options.class;
        },
    },
    methods: {
        handleClick() {
            if (typeof this.$listeners.click === 'function') {
                this.$listeners.click(this.options);
                return;
            }
            if (this.options.btnType === 'dropdown') {
                return;
            }
            if (this.options.btnType === 'print') {
                return;
            }
            if (typeof this.options.method === 'function') {
                this.options.method.call(this, this.options, this.row, this.index);
                return;
            }
            if (typeof this.options.click === 'function') {
                this.options.click.call(this, this.options, this.row, this.index);
                return;
            }
            this.$emit('click', this.$props);
        },
    },
}
</script>

<style scoped>

</style>